<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%@ include file="/commons/meta.jsp"%>
<title>博文编辑,初学者论坛,BeginCode,beginCode</title>
<!-- Bootstrap -->
	<link href="${ctx}/css/bootstrap.css" rel="stylesheet">
	<script charset="utf-8" src="${ctx}/kindeditor/kindeditor.js"></script>
	<script charset="utf-8" src="${ctx}/kindeditor/lang/zh_CN.js"></script>
	 <script src="${ctx}/js/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
//初始化编辑器  K.create("#demoEditor" )  中demoEditor 为文本编辑器的id

	var editor;
	KindEditor.options.filterMode = true;
	KindEditor.ready(function(K){
		editor = K.create("#blogContent",{
			cssPath:'${ctx}/kindeditor/plugins/code/ke.css',
			uploadJson : '${ctx}/kindeditor/jsp/upload_json.jsp',
			fileManagerJson : '${ctx}/kindeditor/jsp/file_manager_json.jsp',filterMode : true,
			items : [
						'fontname', 'fontsize', '|', 'forecolor', 'code','hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons' ,'|', 'link','|', 'image','|', 'table'],
						afterChange:function(){
							//文字变更，去掉错误提示
							$("#bcContent").find(".formtips").remove();
						}
		});

	});
	


</script>
<style type="text/css">

.bs-callout {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px
}

.bs-callout h4 {
	margin-top: 0;
	margin-bottom: 5px
}

.bs-callout p:last-child {
	margin-bottom: 0
}

.bs-callout code {
	border-radius: 3px
}

.bs-callout+.bs-callout {
	margin-top: -5px
}

.bs-callout-danger {
	border-left-color: #d9534f
}

.bs-callout-danger h4 {
	color: #d9534f
}

.bs-callout-warning {
	border-left-color: #f0ad4e
}

.bs-callout-warning h4 {
	color: #f0ad4e
}

.bs-callout-info {
	border-left-color: #5bc0de
}

.bs-callout-info h4 {
	color: #5bc0de
}
.bs-docs-header {
	position: relative;
	padding: 30px 15px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.1);
	background-color: #3071a9;
	background-repeat: repeat-x;
}

.bs-docs-header {
	margin-bottom: 40px;
	font-size: 20px
}

.bs-docs-header h1 {
	margin-top: 0;
	color: #fff;
}

.bs-docs-header p {
	margin-bottom: 0;
	font-weight: 300;
	line-height: 1.4;
}

.bs-docs-header .container {
	position: relative;
}
.container h1 {
	margin-top: 0;
	color: #fff;
	text-align: left;
	font-weight:bold;
}
.container p {
	text-align: left;
}
.bs-docs-footer {
	margin-top: 0;
	border-top: 0
}

.bs-docs-footer {
	padding-top: 40px;
	padding-bottom: 20px;
	color: #777;
	text-align: center;
	border-top: 1px solid #e5e5e5
}

.bs-docs-footer-links {
	padding-left: 0;
	margin-top: 20px;
	color: #999
}

.bs-docs-footer-links li {
	display: inline;
	padding: 0 2px
}

.bs-docs-footer-links li:first-child {
	padding-left: 0
}

@media (min-width:768px) {
	.bs-docs-footer p {
		margin-bottom: 0;
		text-align: center;
	}
}


</style>
</head>
<body style="background-color: #f8f8f8;">
	<jsp:include  page="top.jsp"/>
	
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">空间管理</a></li>
  <li class="active">发布博文</li>
</ol>
     
	
	<div class="container .col-xs-" style="margin-top:20px" >
		<div class="row" >
		<div class="col-md-3">
		<div class="panel panel-primary" style="margin-bottom:10px" >
			<div class="panel-body" >
						<div class="media" style="margin-bottom:10px">
						  <a class="media-left" href="#">
						    <img src="${ctx}/images/girl.jpg" style="width:80px;height:80px;" alt="...">
						  </a>
						  <div class="media-body">
						    <h2 class="media-heading" id="nickName" style="color:#EA0000"></h2>
						    <!-- 	修改资料 更改头像
						 -->
						  </div>
						</div>
					   <!--   <ul class="nav nav-pills" role="tablist">
					   
						  	<li role="presentation" class="active"><a href="#">积分 <span class="badge">42</span></a></li>&nbsp;&nbsp;
						    <li role="presentation" class="active"><a href="#">课程 <span class="badge">2</span></a></li>
						</ul> -->
			</div>
		</div>
		 
			<button type="button" class="btn btn-primary" id="addBlog" data-toggle="button" aria-pressed="false" autocomplete="off" style="border-radius: 0px;width:100%;height:60px;margin-bottom:10px;font-weight:bold;font-size:35px">
			  发布博文
			</button>
			 
						 <div class="list-group" id="classList">
							<a href="#" class="list-group-item active"> 博客分类 </a>  
						</div>
						  <div class="list-group" id="readList">
							<a href="#" class="list-group-item active"> 阅读排行 </a>  
						</div>
					</div>
					
					<div class="col-md-9" >
							  <div class="panel panel-primary" style="margin-top:0;" >
							  	<div class="panel-body">
							  	<form role="form" id="blogForm" action="${ctx}/blog/saveBlog" method="post">
							  	<input type="hidden" name="blogId" value="${blog.bc_blog_id }"/>
   <div class="form-group">
    <label for="exampleInputPassword1"><span class="labelinfoblue" ></span>归属板块</label>
	   <select class="form-control" name="classify" value="${blog.bc_classify_id }">
	   	<c:forEach items="${classifyList }" var="classify" varStatus="status" >
	   		<option value="${classify.bc_classify_id }" >${classify.classify_note}</option>
	   	</c:forEach>
		</select>  
	</div>
  <div class="form-group">
    <label for="exampleInputEmail1"><span class="labelinfowarn" ></span>博客标题</label>
    <input type="email" class="form-control required" id="blogTitle" name="blogTitle" value="${blog.blog_title }" placeholder="博客标题">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1" ><span class="labelinfosuccess" ></span>博客摘要</label>
    <input type="text" class="form-control" id="abstract" name="abstract" value="${blog.blog_abstract }" placeholder="我们提议，为您的博客添加摘要，这也是给阅读者一个引导">
  </div>
  <div class="form-group">
  	<label id="bcContent"><span class="labelinfodanger" ></span>博客正文</label>
  	 <textarea id="blogContent" name="content" class="required" style="width:100%;height:500px">   ${blog.blog_content }</textarea>
  </div>
    <div class="form-group">
    <label for="exampleInputPassword1"><span class="labelinfoblue" ></span>关键字</label>
    <input type="text" class="form-control" id="bckeyword" name="bckeyword" value="${blog.blog_keyword }" placeholder="为你的博客定义关键字，逗号隔开，不要超过6个哦">
  </div>

   <div style="margin-top:10px;text-align:center;">
   <button type="button" class="btn btn-primary" id="send" style="width:100px;">提交</button> &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" style="width:100px;" class="btn btn-primary">保存草稿</button>
   </div>
   <div><font color="red"><b>${msg }</b></font></div>
</form>
								</div>

							  </div>
					</div>
					
			 </div>
			

	</div> <jsp:include page="foot.jsp"></jsp:include>


	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="${ctx}/js/bootstrap.min.js"></script>
 <script type="text/javascript">
	$(function(){
		 //点击新增按钮。
        $('#addBlog').click(function(){
               window.location.href="${ctx}/blog/addBlogInit";
        });
		 //加载登录人
        jQuery.ajax({
    		type:"POST",
    	 	url:"${ctx}/user/getUser", 
    	 	data:"",
    		dataType:"json",
    		success:function(data){
    			 var nickName = data.nickName;
    				if( typeof(nickName) != "undefined" &&  nickName != ""){
    					$("#nickName").append(nickName);
    				} 
    			}
    	 	});
	        //如果是必填的，则加红星标识.
	        $("form :input.required").each(function(){
	            var $required = $("<strong class='hight'>*</strong>"); //创建元素
	            $(this).prev().append($required); //然后将它追加到文档中
	        });
	        //文本框获取键盘输入，修改class
	        $('form :input').blur(function(){
	             var $prev = $(this).prev();
	             $prev.find(".formtips").remove();
	              $(this).parent().removeClass("has-error");
	        }).keyup(function(){
	            $(this).triggerHandler("blur");
	        });//end blur
	       
	        
	        $('#send').click(function(){
	         	 if(!checkMaxLen("博客标题","blogTitle",50)){
	         		return false;
	         	 }
	         	if(!checkContent()){
	         		return false;
	         	}
	         	if(!checkNoMustMaxLen("博客摘要","abstract",100)){
	         		return false;
	         	 }
	         	if(!checkKeyWord()){
	         		return false;
	         	}
	         	editor.sync();
	         	$("#blogForm").submit();
	         	
	         	
	     	  });

	        //校验关键字
	        function checkKeyWord(){
	        	var keyword = $("#bckeyword").val();
	        	if(keyword.length < 50){
	        		  while(keyword.indexOf("，")!=-1)//寻找每一个中文逗号，并替换
		  		        {
	        			  keyword=keyword.replace("，",",");
		  		        }
	        		 	 $("#bckeyword").val(keyword);
		        		if(keyword.split(",").length > 6){
	        			$("#bckeyword").prev().append('<span class="formtips onError hight">关键字需要再6个以内</span>');
		         		$("#bckeyword").parent().addClass("has-error");
			 			$("#bckeyword").focus();
			 			return false;
	        		}
	        	}else{
	         		$prev.append('<span class="formtips onError hight">关键字必须在50字以内</span>');
	         		$("#bckeyword").parent().addClass("has-error");
		 			$("#bckeyword").focus();
		 			return false;
	        	}
	        	return true;
	        }
	     
	        //校验文本必填且最大长度
		      function checkMaxLen(info,id,len){
		    		var $prev = $("#"+id+"").prev();
		         	$prev.find(".formtips").remove();
		         	if($("#"+id+"").val() == "" || $("#"+id+"").val().length > len){
		         		var errorMsg = info+'必填且在'+len+'长度之内.';
		         		$prev.append('<span class="formtips onError hight">'+errorMsg+'</span>');
		         		$("#"+id+"").parent().addClass("has-error");
			 			  $("#"+id+"").focus();
			 			  return false;
			 		}else{
			 			return true;
			 		}
		      }
		        //校验文本最大长度
		      function checkNoMustMaxLen(info,id,len){
		    		var $prev = $("#"+id+"").prev();
		         	$prev.find(".formtips").remove();
		         	if( $("#"+id+"").val().length > len){
		         		var errorMsg = info+'不能超过'+len+'字长度.';
		         		$prev.append('<span class="formtips onError hight">'+errorMsg+'</span>');
		         		$("#"+id+"").parent().addClass("has-error");
			 			  $("#"+id+"").focus();
			 			  return false;
			 		}else{
			 			return true;
			 		}
		      }
	        //校验正文
	          function checkContent(){
		        	//获取html内容，areaId 为文本编辑的id
		      		editor.sync();
		      		if($("#blogContent").val() == "" || $("#blogContent").val().length > 20000){
		      			var errorMsg =  '博客正文必填且在20000字之内.';
		         		$("#bcContent").append('<span class="formtips onError hight">'+errorMsg+'</span>');
		         		editor.focus();
		      			return false;	
		      		}else{
		      			return true;
		      		}
	        	}
	          //异步加载博客分类和博客
	      	 jQuery.ajax({
	  			type:"POST",
	  		 	url:"${ctx}/classify/selClassifyAjax", 
	  		 	data:'',
	  			dataType:"json",
	  			success:function(data){
	  				 if(typeof(data) != undefined){
	  					 	$.each(data,function(i){
	 					 		var liststr= "<a href='#'	class='list-group-item'>"+data[i].classify_note+"</a>";
	 					 		$("#classList").append(liststr);
	 						 });
	 					 }
	  				}
	  		 	});
	      	 jQuery.ajax({
	   			type:"POST",
	   		 	url:"${ctx}/blog/selBlogAjaxLimitN", 
	   		 	data:'',
	   			dataType:"json",
	   			success:function(data){
	   				 if(typeof(data) != undefined){
	   					 	$.each(data,function(i){
	  					 		var liststr= "<a href='${ctx}/blog/selBlogView/"+data[i].bc_blog_id+".html'	class='list-group-item'>"+data[i].blog_title+" <span class='badge'>"+data[i].view_count+"</span></a>";
	  					 		$("#readList").append(liststr);
	  						 });
	  					 }
	   				}
	   		 	});
	});
	</script>
</body>
</html>
